import React,{Component} from 'react';
import './ordercard.scss';
import {
  Link
} from 'react-router-dom';
export default class Ordercard extends Component{
	constructor(props){
    super(props)
    this.state = {
    }
	}
	componentDidMount () {
	}
	render(){
		return(
			<div className="ordercard">
				<div className="card_title">
					<span>{this.props.orderDetail.shop_name}</span>
					<span>{this.props.orderDetail.orderStatuCon === '已完成' ? '交易成功' : this.props.orderDetail.orderStatuCon === '未确认收货' ? '待收货' : this.props.orderDetail.orderStatuCon === '等待发货' ? '待发货' : this.props.orderDetail.orderStatuCon}</span>
				</div>
				<div className="card_conent">
					{
						this.props.orderDetail.goods.map((item,index) => {
							return(
								<div key={index}>
									<Link to={
										{
											pathname: '/shopDetail',
											state: {
												id: item.goods_id
											}
										}
									}>
									<img src={item.goods_image}/>
									<div>
										<p>{item.goods_name}</p>
										<span>¥ {item.goods_price}</span>
										<span>数量：{item.order_goods_num}件</span>
									</div>
									</Link>
								</div>
							)
						})
					}
					<p className="order_ord">订单总额：¥{this.props.orderDetail.order_goods_amount}(含运费：¥{this.props.orderDetail.order_shipping_fee})</p>
				</div>
				{
					this.props.orderDetail.orderStatuCon==='已完成' ?
						<div className={`anniu ${this.state.hide}`}>
							<span><Link to={
								{
									pathname: '/user/order/logistics',
									state: {
										orderId: this.props.orderDetail.order_id
									}
								}
							}>查看物流</Link></span>
							<span><Link to={
								{
									pathname: '/user/order/orderlist',
                  state:{
                  	order_id: this.props.orderDetail.order_id,
                  	uorder_id: this.props.orderDetail.uorder_id,
                  	orderStatuCon: this.props.orderDetail.orderStatuCon
                  }
                }
							}>订单详情</Link></span>
							<span onClick={()=>{this.props.close(this.props.orderDetail.order_id)}}>删除订单</span>
						</div>
						: this.props.orderDetail.orderStatuCon === '未确认收货' || this.props.orderDetail.orderStatuCon === '已签收' ?
						<div className={`anniu ${this.state.hide}`}>
							<span onClick={()=>{this.props.close_quer(this.props.orderDetail.order_id)}}>确认收货</span>
							<span><Link to={
								{
									pathname: '/user/order/logistics',
									state: {
										orderId: this.props.orderDetail.order_id
									}
								}
							}>查看物流</Link></span>
							<span><Link to={
								{
									pathname: '/user/order/orderlist',
									state:{
                  	order_id: this.props.orderDetail.order_id,
                  	uorder_id: this.props.orderDetail.uorder_id,
                  	orderStatuCon: this.props.orderDetail.orderStatuCon
                  }
                }
							}>订单详情</Link></span>
						</div>
						: this.props.orderDetail.orderStatuCon === '待发货' | this.props.orderDetail.orderStatuCon === '等待发货' ?
						<div className={`anniu ${this.state.hide}`}>
							<span><Link to={
								{
									pathname: '/user/order/orderlist',
									state:{
                  	order_id: this.props.orderDetail.order_id,
                  	uorder_id: this.props.orderDetail.uorder_id,
                  	orderStatuCon: this.props.orderDetail.orderStatuCon
                  }
                }
							}>订单详情</Link></span>
						</div>
						: this.props.orderDetail.orderStatuCon==='待付款' ?
						<div className={`anniu ${this.state.hide}`}>
							<span className="order_zf"><Link to={
								{
									pathname: '/user/order/orderlist',
									state:{
                  	order_id: this.props.orderDetail.order_id,
                  	uorder_id: this.props.orderDetail.uorder_id,
                  	orderStatuCon: this.props.orderDetail.orderStatuCon
                  }
                }
							}>立即支付</Link></span>
							<span><Link to={
								{
									pathname: '/user/order/orderlist',
									state:{
                  	order_id: this.props.orderDetail.order_id,
                  	uorder_id: this.props.orderDetail.uorder_id,
                  	orderStatuCon: this.props.orderDetail.orderStatuCon
                  }
                }
							}>订单详情</Link></span>
							<span onClick={()=>{this.props.close_can(this.props.orderDetail.order_id)}}>取消订单</span>
						</div>
						: this.props.orderDetail.orderStatuCon==='已取消' ?
						<div className={`anniu ${this.state.hide}`}>
							<span><Link to={
								{
									pathname: '/user/order/orderlist',
									state:{
                  	order_id: this.props.orderDetail.order_id,
                  	uorder_id: this.props.orderDetail.uorder_id,
                  	orderStatuCon: this.props.orderDetail.orderStatuCon
                  }
                }
							}>订单详情</Link></span>
							<span onClick={()=>{this.props.close(this.props.orderDetail.order_id)}}>删除订单</span>
						</div> : ''
				}
			</div>
		)
	}
}